import React, {Component} from 'react'
import {CSSTransition} from 'react-transition-group';
import {
    HeaderWrapper, Logo, Nav, NavItem, NavSearch,
    SearchInfo, SearchInfoTitle, SearchInfoSwitch, SearchInfoItem,
    SearchInfoList, Addition, Button, SearchWrapper
} from './style'
import {connect} from 'react-redux';
import {actionCreators} from './store'

class Header extends Component {

    render() {

        const {focused, handleInputFocus, handleInputBlur, list}=this.props;

        return (
            <HeaderWrapper>
                <Logo href='/'/>
                <Nav>
                    <NavItem className='left active'>首页</NavItem>
                    <NavItem className='left'>下载APP</NavItem>
                    <NavItem className='right'>登录</NavItem>
                    <NavItem className='right'>
                        <i className="iconfont">&#xe636;</i>
                    </NavItem>
                    <SearchWrapper>
                        <CSSTransition
                            in={focused}
                            timeout={200}
                            classNames="slide"
                        >
                            <NavSearch className={focused ? 'focused' : ''}
                                       onFocus={() => handleInputFocus(list)}
                                       onBlur={handleInputBlur}/>
                        </CSSTransition>
                        <i className={focused ? 'focused iconfont zoom' : 'iconfont zoom'}>&#xe614;</i>
                        {this.getListArea(focused)}
                    </SearchWrapper>

                </Nav>
                <Addition>
                    <Button className='writting'>
                        <i className="iconfont">&#xe615;</i>
                        写文章
                    </Button>
                    <Button className='reg'>注册</Button>
                </Addition>
            </HeaderWrapper>
        )
    }

    getListArea() {

        const {focused, list, page, mouseIn, totalPage, handleMouseEnter, handleMouseLeave, handleChangePage}=this.props;
        const newList = list.toJS();
        const pageList = [];

        if (newList.length > 0) {
            for (let i = (page - 1) * 10; i < page * 10; i++) {
                pageList.push(
                    <SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>
                )
            }
        }

        if (focused || mouseIn) {
            return (
                <SearchInfo
                    onMouseEnter={handleMouseEnter}
                    onMouseLeave={handleMouseLeave}
                >
                    <SearchInfoTitle>
                        热门搜索
                        <SearchInfoSwitch onClick={() => handleChangePage(page, totalPage, this.spinIcon)}>
                            <i ref={(icon) => {
                                this.spinIcon = icon
                            }} className="iconfont spin">&#xe851;</i>
                            换一换
                        </SearchInfoSwitch>
                    </SearchInfoTitle>
                    <SearchInfoList>
                        {
                            pageList
                        }
                    </SearchInfoList>
                </SearchInfo>
            )
        } else {
            return null
        }
    }
}

// const getListArea = (show) => {
//
// }


// //无状态组件
// const Header = (props) => {
//
//
//
// }

const mapStateToProps = (state) => {
    return {
        // focused: state.header.focused
        // focused: state.header.get('focused')
        // focused: state.get('header').get('focused')
        focused: state.getIn(['header', 'focused']),
        list: state.getIn(['header', 'list']),
        page: state.getIn(['header', 'page']),
        totalPage: state.getIn(['header', 'totalPage']),
        mouseIn: state.getIn(['header', 'mouseIn'])
    }
}

const mapDispathToProps = (dispatch) => {
    return {
        handleInputFocus(list){
            // const action = {
            //     type: 'search_focus'
            // }
            if (list.size === 0) {
                dispatch(actionCreators.getList())
            }
            dispatch(actionCreators.searchFocus())
        },

        handleInputBlur(){
            // const action = {
            //     type: 'search_blur'
            // }
            dispatch(actionCreators.searchBlur())
        },

        handleMouseEnter(){
            dispatch(actionCreators.mouseEnter())
        },

        handleMouseLeave(){
            dispatch(actionCreators.mouseLeave())
        },

        handleChangePage(page, totalPage, spin){

            let originAngle = spin.style.transform.replace(/[^0-9]/ig, '');
            if (originAngle) {
                originAngle = parseInt(originAngle, 10);
            } else {
                originAngle = 0;
            }
            spin.style.transform = 'rotate(' + (originAngle + 360) + 'deg)';

            if (page < totalPage) {
                dispatch(actionCreators.changePage(page + 1))
            } else {
                dispatch(actionCreators.changePage(1))
            }

        }
    }
}

export default connect(mapStateToProps, mapDispathToProps)(Header);